<template>
    <div>
        <div class="search">
          <!-- 折叠表头 -->
          <el-card>
            <el-collapse>
              <el-collapse-item name="1">
                <template slot="title">
                  <i class="el-icon-search"/>&nbsp;客户信息查询
                </template>
                <!-- 客户信息查询 -->
                <el-form
                  :inline="true"
                  label-width="100px"
                  class="padding-bottom15">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="客户姓名">
                        <el-input v-model="name"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="客户类型">
                        <el-select
                          v-model="kind"
                          placeholder="客户类型"
                          class="width210">
                          <el-option label="个人" value="个人" />
                          <el-option label="公司" value="公司" />
                          <el-option label="机构" value="机构" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="客户等级">
                        <el-select
                          v-model="level"
                          placeholder="客户等级"
                          class="width210">
                          <el-option label="A级客户" value="A级客户"/>
                          <el-option label="B级客户" value="B级客户"/>
                          <el-option label="C级客户" value="C级客户"/>
                          <el-option label="D级客户" value="D级客户"/>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="邮箱">
                        <el-input v-model="email"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="客户ID">
                        <el-input v-model="carNum"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-button
                        type="primary"
                        icon="el-icon-search"
                        style="margin-left: 25px;"
                        @click="load()">查询</el-button>
                      <el-button
                        type="infor"
                        icon="el-icon-refresh"
                        style="margin-left: 10px;"
                        @click="reset()">重置</el-button>
                    </el-col>
                  </el-row>
                </el-form>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </div>
        <div class="infolist">
          <!-- 客户列表信息 -->
          <el-row style="width:100%">
            <el-col style="width:100%">
              <el-card shadow="always">
                <!-- 用户信息弹出框 --> 
                <el-dialog
                    :visible.sync="dialogVisible"
                    width="70%"
                    :before-close="handleClose">
                    <el-descriptions class="margin-top" title="客户详细信息" :column="3" :size="size" border>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-user"></i>
                            客户姓名
                          </template>
                          {{ form.name }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            性别
                          </template>
                          {{ form.sex === 0 ? '男' : '女' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            年龄
                          </template>
                          {{ form.age }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-tickets"></i>
                            生日
                          </template>
                          {{ form.birthday }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            客户ID
                          </template>
                          {{ form.carNum }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            客户类型
                          </template>
                          {{ form.kind }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            客户等级
                          </template>
                          {{ form.level }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            客户邮箱
                          </template>
                          {{ form.level }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            客户地址
                          </template>
                          {{ form.address }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            客户邮编
                          </template>
                          {{ form.postCode }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            创建时间
                          </template>
                          {{ form.createTime }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            修改时间
                          </template>
                          {{ form.updateTime }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            客户备注
                          </template>
                          {{ form.description }}
                        </el-descriptions-item>
                      </el-descriptions>
                      <el-descriptions class="margin-top" title="客户联系方式" :column="6" :size="size" border style="margin-top: 10px;">
                          <template v-for="(item, index) in form.contactData">
                            <el-descriptions-item :key="index">
                              <template slot="label">
                                <i class="el-icon-user"></i>
                                电话类型
                              </template>
                              {{ item.type }}
                            </el-descriptions-item>
                            <el-descriptions-item :key="index">
                              <template slot="label">
                                <i class="el-icon-mobile-phone"></i>
                                号码
                              </template>
                              {{ item.nums }}
                            </el-descriptions-item>
                            <el-descriptions-item :key="index">
                              <template slot="label">
                                <i class="el-icon-location-outline"></i>
                                姓名
                              </template>
                              {{ item.name }}
                            </el-descriptions-item>
                            <el-descriptions-item :key="index">
                              <template slot="label">
                                <i class="el-icon-tickets"></i>
                                是否禁播
                              </template>
                              {{ item.isForbident }}
                            </el-descriptions-item>
                            <el-descriptions-item :key="index">
                              <template slot="label">
                                <i class="el-icon-office-building"></i>
                                有效性
                              </template>
                              {{ item.isUseful }}
                            </el-descriptions-item>
                            <el-descriptions-item :key="index">
                              <template slot="label">
                                <i class="el-icon-office-building"></i>
                                是否默认
                              </template>
                              {{ item.isDefaultPhone }}
                            </el-descriptions-item>  
                          </template>
                      </el-descriptions>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 修改用户信息弹出窗 -->
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible2"
                  width="70%"
                  :before-close="handleClose2">
                  <el-form
                    ref="newForm"
                    :inline="true"
                    :model="newForm"
                    label-width="80px"
                  >
                    <el-form-item label="客户姓名" style="margin-bottom: 20px !important;">
                      <el-input v-model="newForm.name" class="width220" />
                    </el-form-item>
                    <el-form-item label="性别" :inline="false">
                      <el-select
                        v-model="newForm.sex"
                        placeholder="请选择性别"
                        class="width220"
                      >
                        <el-option label="男" value="0" />
                        <el-option label="女" value="1" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="年龄">
                      <el-input v-model="newForm.age" class="width220" />
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="newForm.email" class="width220" />
                    </el-form-item>
                    <el-form-item label="证件类型">
                      <el-select
                        v-model="newForm.type"
                        placeholder="证件类型"
                        class="width220"
                      >
                        <el-option label="居民身份证" value="居民身份证" />
                        <el-option label="士官证" value="士官证" />
                        <el-option label="护照" value="护照" />
                        <el-option label="港澳台通行证" value="港澳台通行证" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="证件号码" style="margin-bottom: 20px !important;">
                      <el-input v-model="newForm.idNumber" class="width220" />
                    </el-form-item>
                  
                    <el-form-item label="省市区">
                      <el-cascader
                      @change="handleChange"
                        v-model="newForm.position"
                        expand-trigger="hover"
                        :options="options"
                        class="width220"
                      />
                    </el-form-item>
                    <el-form-item label="地址">
                      <el-input v-model="newForm.address" class="width220" />
                    </el-form-item>
                    <el-form-item label="邮政编码">
                      <el-input v-model="newForm.postCode" class="width220" />
                    </el-form-item>
                    <el-form-item label="出生日期">
                      <el-date-picker
                        v-model="newForm.birthday"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        class="width220"
                      />
                    </el-form-item>
                  
                    <!--  更多信息 -->
                    <el-collapse>
                      <el-collapse-item title="更多信息" name="1">
                        <el-form-item label="客户ID" style="width:300px;">
                          <el-input v-model="newForm.carNum" />
                        </el-form-item>
                        <el-form-item label="客户类型">
                          <el-select
                            v-model="newForm.kind"
                            placeholder="客户类型"
                            class="width210">
                            <el-option label="个人" value="个人" />
                            <el-option label="公司" value="公司" />
                            <el-option label="机构" value="机构" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="客户等级">
                          <el-select
                            v-model="newForm.level"
                            placeholder="客户等级"
                            class="width210">
                            <el-option label="A级客户" value="A级客户" />
                            <el-option label="B级客户" value="B级客户" />
                            <el-option label="C级客户" value="C级客户" />
                            <el-option label="D级客户" value="D级客户" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input
                            v-model="newForm.description"
                            type="textarea"
                            :autosize="{ minRows: 3, maxRows: 25}"
                            placeholder="请输入内容"
                            style="width:300px;"
                          />
                        </el-form-item>
                        
                      </el-collapse-item>
                      <!-- 2 联系方式 -->
                      <el-collapse-item title="联系方式" name="3">
                        <!-- 联系方式 -->
                        <el-button
                          style="float: right; padding: 5px; margin-bottom:10px !important;"
                          type="success"
                          icon="el-icon-circle-plus-outline"
                          @click="appendContact">追加</el-button>
                        <el-table
                          :data="newForm.contactData"
                          border
                          style="width: 100%;margin-bottom:10px;">
                          <el-table-column align="center" prop="type" label="电话类型">
                            <template slot-scope="scope">
                              <el-input
                                v-model="scope.row.type"
                                placeholder="电话类型"
                                clearable
                                size="mini"
                              />
                            </template>
                          </el-table-column>
                          <el-table-column align="center" prop="nums" label="号码">
                            <template slot-scope="scope">
                              <el-input
                                v-model="scope.row.nums"
                                placeholder="号码"
                                maxlength="11"
                                clearable
                                size="mini"
                              />
                            </template>
                          </el-table-column>
                          <el-table-column align="center" prop="name" label="联系人姓名">
                            <template slot-scope="scope">
                              <el-input
                                v-model="scope.row.name"
                                placeholder="联系人姓名"
                                clearable
                                size="mini"
                              />
                            </template>
                          </el-table-column>
                  
                          <el-table-column
                            align="center"
                            prop="isForbident"
                            label="禁拨名单"
                          >
                            <template slot-scope="scope">
                              <el-select
                                v-model="scope.row.isForbident"
                                placeholder="否"
                                size="mini"
                              >
                                <el-option label="是" value="是" />
                                <el-option label="否" value="否" />
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column align="center" prop="isUseful" label="有效性">
                            <template slot-scope="scope">
                              <el-input
                                v-model="scope.row.isUseful"
                                size="mini"
                                placeholder="有效性"
                                clearable
                              />
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            prop="isDefaultPhone"
                            label="是否默认">
                            <template slot-scope="scope">
                              <el-select
                                v-model="scope.row.isDefaultPhone"
                                placeholder="是否默认"
                                size="mini">
                                <el-option label="是" value="是" />
                                <el-option label="否" value="否" />
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作" align="center">
                              <template slot-scope="scope">
                                  <el-col :span="24">
                                    <el-button type="danger" icon="el-icon-delete" circle @click="delPhone(scope.$index)"/>
                                  </el-col>
                              </template>
                            </el-table-column>
                        </el-table>
                      </el-collapse-item>
                    </el-collapse>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="save()">确 定</el-button>
                  </span>
                </el-dialog>
                <!-- 客户信息表格 -->
                <el-table
                  ref="multipleTable"
                  :data="tableData"
                  border
                  tooltip-effect="dark"
                  style="width: 100%">
                  <el-table-column label="序号" align="center" width="60" type="index" :index="indexAdd"/>
                  <el-table-column prop="name" label="姓名" align="center"/>
                  <el-table-column prop="sex" label="性别" align="center">
                      <template slot-scope="scope">
                          {{ scope.row.sex == 0 ? '男' : '女' }}
                      </template>
                  </el-table-column>
                  <el-table-column prop="carNum" label="客户ID" align="center" />
                  <el-table-column prop="kind" label="客户类型" align="center"/>
                  <el-table-column prop="level" label="客户等级" align="center" />
                  <el-table-column prop="description" label="备注" width="450" align="center">
                  </el-table-column>
                  <!-- 查看和编辑按钮 -->
                  <el-table-column width="260" label="操作" align="center">
                      <template slot-scope="scope">
                          <el-button
                            type="primary"
                            icon="el-icon-view"
                            round
                            size="mini"
                            @click="info(scope.row.id)">查看</el-button>
                          <el-button
                            type="warning"
                            icon="el-icon-edit"
                            round
                            size="mini"
                            @click="update(scope.row.id)">修改</el-button>
                          <el-button
                            type="danger"
                            icon="el-icon-delete"
                            round
                            size="mini"
                            @click="del(scope.row.id)">删除</el-button>
                      </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="current"
                  :page-sizes="[2, 5, 10, 20]"
                  :page-size="size"
                  style="margin-top: 10px;"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </el-card>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
  import { getCity } from './city.js'
  import request from '../../../utils/request.js'
  export default {
    data() {
      return {
        name:'',
        kind:'',
        level:'',
        email:'',
        carNum:'',
        current:1,
        size:2,
        total:0,
        dialogVisible: false,
        dialogVisible2: false,
        options: getCity(),
        form: {
          id:'',
          name:'',
          sex:'',
          age:'',
          email:'',
          type:'',
          idNumber:'',
          position:[],
          address:'',
          postCode:'',
          birthday:'',
          carNum:'',
          kind:'',
          level:'',
          description:'',
          createTime:'',
          updateTime:'',
          contactData:[]
        },
        newForm:{
            id:'',
            name:'',
            sex:'',
            age:'',
            email:'',
            type:'',
            idNumber:'',
            position:[],
            address:'',
            postCode:'',
            birthday:'',
            carNum:'',
            kind:'',
            level:'',
            description:'',
            createTime:'',
            updateTime:'',
            contactData:[]
        },
        tableData: [
        ]
      };
    },
    methods: {
        handleChange(val) {
            console.log(val)
        },
        appendContact() {
          const newData = {
            type: "",
            nums: "",
            name: "",
            isForbident: "",
            isUseful: "",
            isDefaultPhone: "",
          };
          this.newForm.contactData.splice(0, 0, newData);
        },
      // type序号 - 页面切换递增
      indexAdd(index) {
        const page = this.current // 当前页码
        const pagesize = this.size // 每页条数
        return index + 1 + (page - 1) * pagesize
      },
      handleSizeChange(val) {
        this.size = val;
        this.load();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.load();
      },
      reset() {
        this.name = '';
        this.level = '';
        this.kind = '';
        this.email = '';
        this.carNum = '';
        this.load();
      },
      del(id) {
        this.$confirm('此操作将永久删除该客户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            request.delete("/customer/deleteCustomerById?id=" + id).then(res=>{
              if (res.code === 200) {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                   // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
                  const totalPage = Math.ceil((this.total- 1) / this.size); // 总页数
                  this.current = this.current > totalPage ? totalPage : this.current;
                  this.current = this.current < 1 ? 1 : this.current;
                  this.load();
              }  
            })
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });    
      },
      delPhone(val) {
        this.$confirm('此操作将永久删除该联系方式, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.newForm.contactData.splice(val, 1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });   
      },
      info(id) {
        this.dialogVisible = true;
        for (let i = 0; i < this.tableData.length; i ++) {
            if (this.tableData[i].id == id) {
                this.form = this.tableData[i];
                this.form.contactData = this.tableData[i].contactData;
            }
        }
      },
      save() {
          this.$confirm('是否确认修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              request.put("/customer/updateCustomerById", this.newForm).then(res=>{
                    if (res.code === 200) {
                        this.$message({
                          message: '操作成功',
                          type: 'success'
                        });
                        this.load();
                        this.dialogVisible2 = false;
                    } else {
                        this.dialogVisible2 = false;
                        this.$message.error('修改失败');
                    }
                })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            });          
          }); 
      },
      update(id) {
        this.newForm = {
            id:'',
            name:'',
            sex:'',
            age:'',
            email:'',
            type:'',
            idNumber:'',
            position:[],
            address:'',
            postCode:'',
            birthday:'',
            carNum:'',
            kind:'',
            level:'',
            description:'',
            createTime:'',
            updateTime:'',
            contactData:[]
        };
        this.dialogVisible2 = true;
        for (let i = 0; i < this.tableData.length; i ++) {
            if (this.tableData[i].id == id) {
                this.newForm.position.push(this.tableData[i].province.toString());
                this.newForm.position.push(this.tableData[i].city.toString());
                this.newForm.position.push(this.tableData[i].region.toString());
                this.newForm.address = this.tableData[i].address;
                this.newForm.id = this.tableData[i].id;
                this.newForm.contactData = this.tableData[i].contactData;
                this.newForm.birthday = this.tableData[i].birthday;
                this.newForm.sex = this.tableData[i].sex.toString();
                this.newForm.age = this.tableData[i].age;
                this.newForm.carNum = this.tableData[i].carNum;
                this.newForm.createTime = this.tableData[i].createTime;
                this.newForm.description = this.tableData[i].description;
                this.newForm.email = this.tableData[i].email;
                this.newForm.idNumber = this.tableData[i].idNumber;
                this.newForm.kind = this.tableData[i].kind;
                this.newForm.level = this.tableData[i].level;
                this.newForm.name = this.tableData[i].name;
                this.newForm.postCode = this.tableData[i].postCode;
                this.newForm.type = this.tableData[i].type;
                this.newForm.updateTime = this.tableData[i].updateTime;
            }
        }
      },
      handleClose() {
        this.$confirm('确认关闭？')
        .then(() => {
            this.dialogVisible = false;
        })
      },
      handleClose2() {
        this.$confirm('确认关闭？')
        .then(() => {
            this.dialogVisible2 = false;
        })
      },
      load() {
          request.get("/customer/getCustomerByConditionAndPage?current=" + this.current + "&size=" + this.size +
           "&name=" + this.name + "&kind=" + this.kind + "&level=" + this.level + "&email=" + this.email + 
           "&carNum=" + this.carNum).then(res=>{
              this.tableData = res.data.records;
              this.total = res.data.total;                            
          })
      }
    },
    mounted() {
        this.load();
    }
  };
</script>

<style scoped>
  .infolist {
    width: 100%;
    margin-top: 20px;
  }
  .judgebtn {
    height: 40px;
  }
  .newbtn {
    float: right;
    padding-right: 1%;
  }
  .search {
    width: 100%;
  }
  .el-collapse .el-collapse-item {
    margin-bottom: 0;
  }
  .padding-bottom15 {
    padding-bottom: 15px;
  }
  .width185 {
    width: 185px;
  }
</style>